<script setup lang="ts">
import { ref } from 'vue';

interface JoinRoomData {
  roomId: string;
  userId: string;
}

const emit = defineEmits<{
  'join-room': [data: JoinRoomData]
}>();

const roomId = ref<string>('');
const userId = ref<string>('');
const errorMessage = ref<string>('');

function handleSubmit(): void {
  if (!roomId.value) {
    errorMessage.value = '请输入房间ID';
    return;
  }
  
  emit('join-room', { 
    roomId: roomId.value, 
    userId: userId.value 
  });
}

function createRandomRoom(): void {
  const randomRoomId = `room-${Math.floor(Math.random() * 1000000)}`;
  roomId.value = randomRoomId;
  handleSubmit();
}
</script>

<template>
  <div class="join-room-container">
    <div class="join-form">
      <h2>加入视频通话</h2>
      
      <div class="form-group">
        <label for="roomId">房间ID</label>
        <input 
          type="text" 
          id="roomId" 
          v-model="roomId" 
          placeholder="请输入房间ID" 
        />
      </div>
      
      <div class="form-group">
        <label for="userId">用户名称 (可选)</label>
        <input 
          type="text" 
          id="userId" 
          v-model="userId" 
          placeholder="请输入您的名称"
        />
      </div>
      
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      
      <div class="button-group">
        <button @click="handleSubmit" class="join-button">加入房间</button>
        <button @click="createRandomRoom" class="create-button">创建新房间</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.join-room-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.join-form {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
}

.join-button {
  background-color: #4CAF50;
  color: white;
  flex: 1;
}

.create-button {
  background-color: #2196F3;
  color: white;
  flex: 1;
}

.error-message {
  color: #f44336;
  margin-bottom: 15px;
}
</style> 